<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#strScreen {
				width: 350px;
				height: 100px;
				background-color: skyblue;
				text-align: center;
				line-height: 100px;
			}
			
			#inputAPI {
				width: 330px;
				height: 40px;
				font-size: 14px;
			}
			
			#wow {
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				background-color: gold;
				margin-top: 15px;
			}
			/************************************/
			
			.rotateDiv {
				width: 100px;
				height: 100px;
				margin-left: 100px;
				margin-top: 50px;
				-webkit-transform: rotate(90deg): -ms-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				transform: rotate(90deg);
				background-color: mediumpurple;
				line-height: 100px;
				text-align: center;
				animation: becomeArc 2s 2s linear forwards;
			}
			
			@-webkit-keyframes becomeArc {
				0 {
					border-radius: 0px;
					width: 100px;
					height: 100px;
				}
				50% {
					border-radius: 100px;
					width: 100px;
					height: 100px;
					line-height: 100px;
				}
				75% {
					border-radius: 100px;
					width: 100px;
					height: 100px;
					line-height: 100px;
				}
				100% {
					border-radius: 300px;
					width: 300px;
					height: 300px;
					line-height: 300px;
				}
			}
		</style>
	</head>

	<body>
		<div id="strScreen">
			<input type="text" placeholder="随便输入一串字符(最初级程序，比较笨)" id="inputAPI" />
		</div>
		<div id="wow" onclick="clickMe()">
			点我点我点我
		</div>
		<!--****************************-->
		<div style="color: red;font-size: 20px;margin-top: 30px;margin-bottom: 20px;">旋转(0.5s太短了，我改成2秒了)：</div>
		<div class="rotateDiv">
			转个鸡子
		</div>
		<!--******************************-->
		<div><span style="color: red;">新增的伪类选择器：</span>div:only-of-type div:only-child div:nth-child(1) div:nth-last-child div:nth-of-type div:nth-last-of-type div:last-child div:root div:empty div:target div:enabled div:disabled div:checked div:not(p) div:selection </div>
		<!--************************************-->
		<div><span style="color: red;">列举转换：</span>String(); Number(); var a = 1 + "111"; 隐式转换</div>
		<br />
		<br />
		<br />
		<br />
		<div><span style="color: red;">join和split的区别：</span>Join 函数获取一批字符串，然后用分隔符字符串将它们联接起来，从而返回一个字符串。Split 函数获取一个字符串，然后在分隔符处将其断开，从而返回一批字符串。但是，这两个函数之间的主要区别在于 Join 可以使用任何分隔符字符串将多个字符串连接起来，而 Split 只能使用一个字符分隔符将字符串断开。</div>
	</body>
	<script type="text/javascript">
		function clickMe() {

			var strToCount = document.getElementById("inputAPI").value;
			if(!strToCount) {
				alert("我去，你倒是输入点东西啊");
			} else {
				var str = strToCount;
				var arrStr = [];
				for(var i = 0; i < str.length; i++) {
					var letters = str[i];
					if(!arrStr[letters]) {
						arrStr[letters] = 1;
					} else {
						arrStr[letters]++;
					}
				}
				var max = 0;
				var max_letter = "";
				var newLetters;
				for(newLetters in arrStr) {
					if(max < arrStr[newLetters]) {
						max = arrStr[newLetters];
						max_letter = newLetters;
					}
				}
				document.getElementById("inputAPI").value = max_letter + "为最多出现字符，出现的次数为" + max;
			}

		}
	</script>

</html>